<template lang="pug">
  h4 配色 | Scheme 
  scheme-gallery
  scheme-preview(:scheme="formData")

  form(@submit.prevent="handleSubmit")
    input(v-model="formData.name" placeholder="name")
    br

    select(v-model="formData.type")
      option(disabled, value="undefined") sechem types
      option(v-for="type in types" :key="type.id" :value="type.value") {{type.name}}

    select(v-model="formData.graphicId" v-if="formData.type === 'graphic'")
      option(disabled, value="undefined") select graphics
      option(v-for="graphic in graphics" :key="graphic.id" :value="graphic.id") {{graphic.name}}

    select(v-model="formData.compositionId" v-if="formData.type === 'composition'")
      option(disabled, value="undefined") select composition
      option(v-for="composition in compositions" :key="composition.id" :value="composition.id") {{composition.name}}

    select(v-model="formData.mashupId" v-if="formData.type === 'mashup'")
      option(disabled, value="undefined") select mashups
      option(v-for="mashup in mashups" :key="mashup.id" :value="mashup.id") {{mashup.name}}

    br
    select(v-model="formData.backgroundColorId")
      option(disabled, value="undefined") backgroud color
      option(v-for="color in colors" :key="color.id" :value="color.id")  {{ color.name }}

    ul
      li(v-for="(item, graphicId) in formData.swatches" :key="graphicId")
        div.thumbnail-icon(v-html="svgIcon(graphicId)")
        select(v-model="formData.swatches[graphicId]")
          option(disabled, value="undefined") select color
          option(v-for="color in colors" :key="color.id" :value="color.id") {{color.name}}

    br
    button(type="submit" :disabled="submitDisabled") create scheme
    button(@click="resetFormData") Reset
</template>

<script setup>
import { computed, ref, onMounted, watch, inject } from 'vue';
import api from '../../apis/api'
import { checkFormData } from '../../utils/js.util'
import SchemeGallery from './scheme-gallery.vue'
import SchemePreview from './scheme-preview.vue'

const mainBrandId = inject('mainBrandId')
const colors = inject('colors')
const graphics = inject('graphics')
const compositions = inject('compositions')
const mashups = inject('mashups')
const currComponents = ref({})
const formData = ref({
  name: 't',
  brandId: 1,
  graphicId: undefined,
  compositionId: undefined,
  mashupId: undefined,
  type: 'composition',
  backgroundColorId: undefined,
  swatches: {},
})

const initialFormData = { ...formData.value, ...{ swatches: {} } }
const handleSubmit = async () => {
  const result = await api.post('schemes', { ...formData.value })
  resetFormData()
};

const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
  currComponents.value = {}
};

watch(() => formData.value.compositionId, (id) => {
  if (!id) return
  const composition = compositions.value.find(c => c.id == id)
  for (const key in composition.components) {
    if (composition.components.hasOwnProperty(key)) {
      const element = composition.components[key];
      currComponents.value[key] = { ...element }
    }
  }
  genSwatchesFormJson(composition)
})

function genSwatchesFormJson(composition) {
  const components = composition.components
  for (const direction in components) {
    const element = components[direction];
    formData.value.swatches[element?.graphicId] = undefined
  }
}

watch(mainBrandId, async () => {
  formData.value.brandId = mainBrandId.value
  formData.value.graphicId = undefined
  formData.value.compositionId = undefined
  formData.value.mashupId = undefined
})

watch(() => formData.value.type, () => {
  ['graphic', 'composition', 'mashup']
    .forEach(item => formData.value[item + 'Id'] = undefined)
})

const submitDisabled = computed(() => !checkFormData(formData.value))

const svgIcon = computed(() => (id => {
  const component = currComponents.value
  const keys = Object.keys(component)
  const key = keys.find(key => component[key].graphicId === +id)
  return component[key]?.svgCode
}))

const types = [
  { id: 1, name: 'graphic', value: 'graphic' },
  { id: 2, name: 'composition', value: 'composition' },
  { id: 3, name: 'mashup', value: 'mashup' },
]

</script>

<style scoped>
.thumbnail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.thumbnail-icon svg {
  max-height: 2rem;
}
</style>
